<template>
	<view class="exhibitor-overview">
		<image :class="['logo', logoPosition]" :src="logo" mode="aspectFill"></image>
		<text class="name">{{name}}</text>
		<view class="info">
			<view class="info-item">
				<image src="/static/imgs/icon-visitor.png" mode="scaleToFill"></image>
				<text class="label">访客：</text>
				<text>{{visitor}}</text>
			</view>
			<view class="info-item">
				<image src="/static/imgs/icon-views.png" mode="scaleToFill"></image>
				<text class="label">浏览：</text>
				<text>{{views}}</text>
			</view>
			<view class="info-item">
				<image src="/static/imgs/icon-booth.png" mode="scaleToFill"></image>
				<text class="label">展位：</text>
				<text v-if="booth.length > 0" v-for="(item, index) in booth" :key="item.booth_id">{{ index === (booth.length - 1) ? item.booth_no: item.booth_no + '、' }}</text>
				<text v-if="booth.length <= 0">暂无</text>
			</view>
		</view>
		<text v-if="showIntroduce" :class="['introduce', isEllipsis ? 'u-line-4': '']">
			{{introduce}}
		</text>
		<view class="unfold-btn" v-if="showIntroduce && showUnfoldBtn" @click="handleUnfold">
			<image :class="[isEllipsis ? '': 'unfold']" src="/static/imgs/icon-unfold.png" mode="scaleToFill"></image>
			<text>{{isEllipsis ? '展开': '收起'}}</text>
		</view>
		<view class="op">
			<view class="op-item" v-if="showContactBtn" @click="onCall">
				<image src="/static/imgs/exhibitor-contact.png" mode="scaleToFill"></image>
				<text>联系</text>
			</view>
			<view class="op-item" v-if="showVRBtn" @click="handleVR">
				<image src="/static/imgs/exhibitor-vr.png" mode="scaleToFill"></image>
				<text>VR漫游</text>
			</view>
			<view class="op-item" @click="handleNavigate" v-if="showNavBtn">
				<image src="/static/imgs/exhibitor-nav.png" mode="scaleToFill"></image>
				<text>导航</text>
			</view>
			<view class="op-item" @click="toProductCenter">
				<image src="/static/imgs/tabbar-product.png" mode="scaleToFill"></image>
				<text>展品</text>
			</view>
		</view>

		<ComplainPanel :targetId="exhibitorId" :type="exhibitorType" :bottom="showIntroduce ? '500rpx': '200rpx' " />
		<u-action-sheet :description="actionDesc" :actions="actionList" @select="handleClickAction" :title="actionTitle"
			:show="showActionSheet" cancelText="取消" @close="showActionSheet = false"></u-action-sheet>
	</view>
</template>

<script>
	import ComplainPanel from '@/components/common/ComplainPanel.vue'
	import ComplaintTypeEnum from '@/common/enum/ComplaintType.js'
	import {
		rootUrl
	} from '@/utils/config.js'

	export default {
		name: "ExhibitorOverview",
		components: {
			ComplainPanel
		},
		props: {
			exhibitorId: {
				type: Number
			},

			logo: {
				type: String
			},

			name: {
				type: String
			},

			visitor: {
				type: Number
			},

			views: {
				type: Number
			},

			// 展位列表集合
			booth: {
				type: Array,
				default: function() {
					return []
				}
			},

			introduce: {
				type: String
			},

			logoPosition: {
				type: String,
				default: 'right'
			},

			// 维度
			latitude: {
				type: Number
			},

			// 经度
			longitude: {
				type: Number
			},

			// 是否显示介绍文字
			showIntroduce: {
				type: Boolean,
				default: true
			},

			// 手机号码
			phone: {
				type: String
			},

			// 电话号码
			mobile: {
				type: String
			},

			address: {
				type: String
			},

			// VR图片ID
			vrImgId: {
				type: Number,
				default: 0
			}
		},


		data() {
			return {
				// 是否显示展开按钮
				showUnfoldBtn: false,
				// 是否省略文本
				isEllipsis: false,
				// 是否显示操作菜单
				showActionSheet: false,
				// 操作菜单标题
				actionTitle: '联系方式',
				// 操作菜单选项列表
				actionList: [],
				// 操作菜单提示文字
				actionDesc: '点击拨打电话'
			}
		},

		watch: {
			introduce(val) {
				if (val.trim()) {
					this.$nextTick(() => {
						this.getTextHeight()
					})
				}
			}
		},

		computed: {
			exhibitorType() {
				return ComplaintTypeEnum.EXHIBITOR.value
			},

			showContactBtn() {
				if (String(this.phone).trim() || String(this.mobile).trim()) {
					return true
				}

				return false
			},

			showVRBtn() {
				if (this.vrImgId) {
					return true
				}

				return false
			},

			showNavBtn() {
				if (this.latitude && this.longitude) {
					return true
				}

				return false
			}
		},

		methods: {
			getTextHeight() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.introduce').boundingClientRect(data => {
					if (data?.height > 84) {
						this.showUnfoldBtn = true
						this.isEllipsis = true
					}
				}).exec()
			},

			handleUnfold() {
				this.isEllipsis = !this.isEllipsis
			},

			// 点击操作菜单选项
			handleClickAction(e) {
				console.log(e)
				const key = e.key
				if (key == 'call') {
					// 拨打电话
					uni.makePhoneCall({
						phoneNumber: e.name
					})
				} else if (key == 'address') {
					// 导航地址
					uni.openLocation({
						name: this.name,
						address: this.address,
						latitude: this.latitude,
						longitude: this.longitude
					})
				}
			},

			// 导航
			handleNavigate() {
				this.showActionSheet = true
				this.actionTitle = '联系地址'
				this.actionDesc = '点击地址导航'

				this.actionList = [{
					key: 'address',
					name: this.address
				}, ]
			},

			// 联系方式
			onCall() {
				this.showActionSheet = true
				this.actionTitle = '联系方式'
				this.actionDesc = '点击拨打电话'

				this.actionList = [{
						key: 'call',
						name: this.phone
					},
					{
						key: 'call',
						name: this.mobile
					}
				]
			},

			// 点击VR事件
			handleVR() {
				const src = `${rootUrl}/vr?id=${this.vrImgId}`
				console.log(src)
				uni.navigateTo({
					url: '/pages/vr/vr',
					success: function(res) {
						res.eventChannel.emit('data', {
							url: src
						})
					}
				})
			},

			// 跳转到展品列表
			toProductCenter() {
				uni.navigateTo({
					url: `/pages/exhibitor-products/exhibitor-products?exhibitorId=${this.exhibitorId}&exhibitorName=${this.name}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.exhibitor-overview {
		box-sizing: border-box;
		padding: 160rpx 40rpx;
		padding-bottom: 46rpx;
		position: relative;
		width: 100%;
		border-radius: 14px;
		box-shadow: 0 0 4px 0 rgba($color: #000000, $alpha: .16);


		.logo {
			position: absolute;
			top: -60rpx;
			width: 170rpx;
			height: 170rpx;
			border-radius: 5px;
			box-shadow: 2px 2px 5px 0 rgba($color: #000000, $alpha: .4);
			background-color: #fff;

			&.right {
				right: 40rpx;
			}

			&.left {
				left: 40rpx;
			}
		}

		.name {
			font-size: 18px;
			font-weight: bold;
			color: #303133;
		}

		.info {
			display: flex;
			flex-wrap: wrap;

			.info-item {
				margin-top: 18rpx;
				margin-right: 22rpx;
				display: flex;
				align-items: center;

				image {
					margin-right: 2rpx;
					width: 26rpx;
					height: 26rpx;
				}

				text {
					color: #A2A2A2;
					font-size: 12px;
				}
			}
		}

		.introduce {
			margin-top: 40rpx;
			font-size: 16px;
			color: #666;
			display: block;
			line-height: 1.3125;
			white-space: pre-wrap;
		}

		.unfold-btn {
			margin-top: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			color: #C8C8C8;

			image {
				margin-right: 10rpx;
				width: 12px;
				height: 13px;

				&.unfold {
					transform: rotate(180deg);
				}
			}
		}

		.op {
			margin-top: 48rpx;
			display: flex;
			position: relative;
			right: 30rpx;
			width: calc(100% + 30rpx);

			.op-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding:0 56rpx;
				border-right: solid 1px #314379;

				&:first-child {
					padding-left: 0;
				}

				&:nth-child(2) {
					flex-shrink: 0;

					image {
						width: 60rpx;
						height: 40rpx;
						margin-bottom: 12rpx;
					}
				}

				&:last-child {
					border-right: 0;
				}

				image {
					width: 52rpx;
					height: 52rpx;
				}

				text {
					margin-top: 4rpx;
					font-size: 12px;
					font-weight: bold;
					color: #797979;
					font-family: 'Segoe UI';
				}
			}
		}
	}
</style>
